<template>
  <view v-if="open" style="padding-bottom: 100rpx">
    <u-navbar
      :placeholder="true"
      :titleStyle="{ color: '#ffffff' }"
      leftIconColor="#ffffff"
      bgColor="#3775cb"
      :autoBack="true"
    >
    </u-navbar>
    <uni-card>
      <uni-list>
        <uni-list :border="true">
          <uni-list-chat
            :title="customer?.name"
            :avatar="customer?.avatarUrl ? customer?.avatarUrl : '/static/icons/avatar.png'"
            :note="customer?.updateTime"
            badge-positon="left"
          >
            <view class="chat-custom-right">
              <view style="margin-top: 14rpx">
                <u-icon @tap="submitForm" name="checkbox-mark" color="#3775cb" size="30"></u-icon>
              </view>
            </view>
          </uni-list-chat>
        </uni-list>
      </uni-list>
      <u--form labelPosition="left" :model="customer" :rules="rules" ref="form" labelWidth="68">
        <u-form-item label="客户名称" prop="name" ref="item1">
          <u--input v-model="customer.name" border="bottom"></u--input>
        </u-form-item>
        <u-form-item label="企业简称" prop="corpFullName" ref="item1">
          <u--input v-model="customer.corpFullName" border="bottom"></u--input>
        </u-form-item>
        <u-form-item label="企业全称" prop="corpName" ref="item1">
          <u--input v-model="customer.corpName" border="bottom"></u--input>
        </u-form-item>
        <u-form-item label="企业职位" prop="positionName" ref="item1">
          <u--input v-model="customer.positionName" border="bottom"></u--input>
        </u-form-item>
        <u-form-item label="身份证号" prop="idCard" ref="item1">
          <u--input v-model="customer.idCard" border="bottom"></u--input>
        </u-form-item>
      </u--form>
    </uni-card>
    <uni-card title="客户旅程">
      <view style="max-height: 80vh; overflow: auto">
        <u-tabs :list="tabs" @click="handleTabs"></u-tabs>
        <follow-record ref="followRecordRef" v-if="tabsIndex === 0" :customer-id="customerId" />
        <opportunity ref="opportunityRef" v-if="tabsIndex === 1" :customer-id="customerId" />
        <contact ref="contactRef" v-if="tabsIndex === 2" :customer-id="customerId" />
        <customer-log v-if="tabsIndex === 3" :customer-id="customerId" />
      </view>
    </uni-card>
    <send v-if="customer.entryType === '1'" :qw-external-userid="customer.qwExternalUserid" />
  </view>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { getCustomerAPI, putCustomerAPI } from '@/services/customer'
import FollowRecord from '@/pagesCustomer/customer/journey/followRecord.vue'
import Send from '@/pagesCustomer/customer/send.vue'
import Contact from '@/pagesCustomer/customer/journey/contact.vue'
import CustomerLog from '@/pagesCustomer/customer/journey/customerLog.vue'
import Opportunity from '@/pagesCustomer/customer/journey/opportunity.vue'
// 接收页面参数
const query = defineProps<{
  customerId: string
}>()
const opportunityRef = ref<InstanceType<typeof Opportunity>>()
const followRecordRef = ref<InstanceType<typeof FollowRecord>>()
const contactRef = ref<InstanceType<typeof Contact>>()

const open = ref(false)
const tabsIndex = ref(0)

const tabs = ref([
  { name: '跟进记录' },
  { name: '销售机会' },
  { name: '联系方式' },
  { name: '客户日志' },
])
const customer = ref<any>({
  dynamicTags: [],
  customerId: undefined,
  name: undefined,
  avatar: undefined,
  corpName: undefined,
  corpFullName: undefined,
  positionName: undefined,
  type: undefined,
  gender: undefined,
  laterFollowTime: undefined,
  entryType: undefined,
  cusTypeId: undefined,
  followStageId: undefined,
  idCard: undefined,
  birthday: undefined,
  nationality: undefined,
  marriage: undefined,
  education: undefined,
  tagIds: undefined,
})
const rules = ref<any>({
  name: {
    type: 'string',
    required: true,
    message: '请填写客户名称',
    trigger: ['blur', 'change'],
  },
})

const getCustomerData = async () => {
  const res = await getCustomerAPI(query.customerId)
  customer.value = res.data
}

const handleTabs = async (e: any) => {
  tabsIndex.value = e.index
}

const submitForm = async (e) => {
  const res = await putCustomerAPI(customer.value)
}

const refreshOpportunityList = async (query: any) => {
  opportunityRef.value!.refreshOpportunityList(query)
}

const refreshFollowRecordList = async (query: any) => {
  followRecordRef.value!.refreshFollowRecordList(query)
}

const refreshContactList = async (query: any) => {
  contactRef.value!.refreshContactList(query)
}

// 组件挂载完毕
onMounted(() => {
  open.value = true
  getCustomerData()
})
// 暴露
defineExpose({
  refreshOpportunityList,
  refreshFollowRecordList,
  refreshContactList,
})
</script>

<style lang="scss">
page {
  background-color: #f7f7f7;
  height: 100%;
}
</style>
